<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>表格显示带关键字查询(bate)</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<link type="text/css" href="flexigrid/css/flexigrid_blue.css" rel="stylesheet"/>
	<script type="text/javascript" src="flexigrid/jquery.js"></script>  
	<script type="text/javascript" src="flexigrid/flexigrid.js"></script>

<script type="text/javascript">
	
	$(function() {	//flexigrid表格设置
	    $("#flex").flexigrid({
		        url : 'userlist',	//ajax方式对应的url地址
		        dataType : 'json',	//请求数据格式
		        colModel : [{
			            display : 'ID',
			            name : 'userid',
			            width : 60,	//得加上 要不IE报错
			            sortable : true,	//是否可被排序
			            align : 'center'
		            }, {
			            display : '用户',
			            name : 'username',
			            width : 100,
			            sortable : true,
			            align : 'center'
		            }, {
			            display : '密码',
			            name : 'password',
			            width : 100,
			            sortable : true,
			            align : 'center'
		            }, {
			            display : '类型',
			            name : 'usertype',
			            width : 100,
			            sortable : true,
			            align : 'center'
		            }],
		        searchitems : [{		//查询功能模块
			            display : 'ID',
			            name : 'id',
			            isdefault : true
		            }, {
			            display : '用户',
			            name : 'username'
		            }],
			    usepager : true,	//是否使用分页
		        sortname : 'userid',	//按那一列排序
		        sortorder : 'asc',	//排序方式
		        rp : 10,	//每页默认显示数量
		        
		        useRp : true,	//是否可动态设置每页显示数量
		        striped : true,	//是否显示斑纹效果
		        resizable : false,	//是否可伸缩
		        nowrap : true, // 是否不换行
		        checkbox: true,//是否显示第一列的checkbox
		        showTableToggleBtn : false,	//是否显示表开关

		        
		        errormsg : '发生错误',	//错误提示信息
		        nomsg : '无相关记录',	//无结果提示信息
		        procmsg : '正在处理,请稍候 ... ',	//正在处理的提示信息
		        pagestat : '显示 {from} / {to} 行,共 {total} 行',	// 显示当前页和总页面的样式
		        
		        autoload : true,		// 自动加载 
		        blockOpacity : 1,	// 透明度设置 
		        minwidth : 30, 	// 列的最小宽度   
	            minheight : 80,	// 列的最小高度   
	            
		        width : 500,	
		        height : 230,
		        title : '用户列表'
	        })
    });

</script>

</head>
<body>

	<table id="flex" ></table>

</body>
</html>